<template>
  <div>
    <div id="tmapTracks" style="width: 100%; height: 100%"></div>

    <div style="position: absolute; right: 50px; bottom: 20px; z-index: 999">
      <div
        style="float: left; display: flex; height: 30px; align-items: center"
      >
        <el-button
          @click="startAnimation"
          type="primary"
          size="mini"
          class="el-icon-video-play"
          >开始</el-button
        >
        <el-button
          @click="pauseAnimation"
          type="primary"
          size="mini"
          class="el-icon-video-pause"
          >暂停</el-button
        >
        <el-button @click="stopAnimation" type="primary" size="mini"
          >停止</el-button
        >
        <div>
          <el-slider
            v-model="speed"
            style="width: 200px; margin: 0 10px"
            :min="0.1"
            :max="50"
            @change="speedChange"
          ></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>


<!-- <script
     type="text/javascript"
     src="http://api.tianditu.gov.cn/api?v=4.0&tk=33752fcceac2cec91dcd788b342fba06"
   ></script> -->
   <script
   type="text/javascript"
   src="https://gis.soszyzg.com/tdtapi?v=4.0&tk=33752fcceac2cec91dcd788b342fba06"
 ></script>

 <script src="https://gis.soszyzg.com/tdtlbsjs/lib/d3/d3.min.js" charset="utf-8"></script>
<script src="https://gis.soszyzg.com/tdtlbsapi/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script src="https://gis.soszyzg.com/tdtlbsapi/js4.0/opensource/openlibrary/CarTrack.js"></script>
<script src="https://gis.soszyzg.com/tdtlbsapi/js4.0/opensource/data/point.js"></script>

   <!-- <script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" charset="utf-8"></script> -->
	<!-- <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script> -->
	<!-- <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script> -->
	<!-- <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script> -->
 

<script>
export default {
  data() {
    return {
      speed: 5,
    };
  },
  props: {},
  watch: {},
  mounted() {
    this.loadTiandituScript()
      .then(() => {
        console.log("初始化地图");
        this.initTMap(); // 脚本加载后初始化地图
      })
      .catch((error) => {
        console.error("Failed to load Tianditu API script:", error);
      });
  },
  methods: {
    // 动态加载天地图脚本
    loadTiandituScript() {
      return new Promise((resolve, reject) => {
        if (typeof T !== "undefined") {
          resolve(); // 如果 T 已经存在，直接 resolve
        } else {
          const script = document.createElement("script");
          script.src =
            "http://api.tianditu.gov.cn/api?v=4.0&tk=33752fcceac2cec91dcd788b342fba06";
          script.onload = resolve;
          script.onerror = reject;
          document.head.appendChild(script);
        }
      });
    },
    // 初始化天地图
    initTMap() {
      console.log("initTMap==");
      var tile = new T.TileLayer(
        "https://gis.soszyzg.com/tdtDataServer?T=vec_w&x={x}&y={y}&l={z}&tk=33752fcceac2cec91dcd788b342fba06"
      );
      this.tmap = new T.Map("tmapTracks", { layers: [tile] });
      this.tmap.centerAndZoom(new T.LngLat(104.087715, 30.567811), 12);
      this.tmap.enableScrollWheelZoom(true);
    },

    TmapSetTravel(val) {
      console.log("轨迹start", val);
      this.trackStatus = "";
      // 轨迹点列表
      var pointList = [
        {
          // time: "2023-12-19 10:28:10",
          lng: 121.1342347,
          lat: 32.0551446,
        },
        {
          // time: "2023-12-19 10:28:30",
          lng: 121.1406307,
          lat: 32.0553588,
        },
        {
          time: "2023-12-19 10:29:10",
          lng: 121.1475297,
          lat: 32.0555119,
        },
        {
          time: "2023-12-19 10:29:30",
          lng: 121.1579859,
          lat: 32.0558791,
        },
        {
          time: "2023-12-19 10:29:50",
          lng: 121.1679751,
          lat: 32.0563687,
        },
        {
          time: "2023-12-19 10:30:10",
          lng: 121.1820965,
          lat: 32.0571032,
        },
        {
          time: "2023-12-19 10:30:20",
          lng: 121.1866958,
          lat: 32.0572256,
        },
        {
          time: "2023-12-19 10:30:30",
          lng: 121.1869832,
          lat: 32.0557261,
        },
        {
          time: "2023-12-19 10:30:40",
          lng: 121.1869473,
          lat: 32.0534614,
        },
        {
          time: "2023-12-19 10:31:10",
          lng: 121.1835337,
          lat: 32.0486566,
        },
      ];
      pointList = val;
      this.tmap.centerAndZoom(
        new T.LngLat(pointList[0].lng, pointList[0].lat),
        14
      );
      if (this.CarTrack) {
        this.CarTrack.clear();
        this.CarTrack = null;
      }
      // 创建车辆轨迹
      this.CarTrack = new T.CarTrack(this.tmap, {
        interval: 5,
        // speed: 50,
        speed: Number(this.speed),
        dynamicLine: true,
        polylinestyle: { color: "#28F", weight: 6, opacity: 0.9 },
        carstyle: {
          display: true,
          iconUrl: require("@/assets/images/car.png"),
          width: 50,
          height: 26,
        },
        Datas: pointList.map(function (obj, i) {
          var lonLat = new T.LngLat(obj.lng, obj.lat);
          return lonLat;
        }),
        passOneNode: this.passOneNode, //车辆移动一次时触发调用的方法
      });
    },
    //车辆移动一次时触发调用的方法 Lnglat：经过的坐标 index：节点序号。
    passOneNode(Lnglat) {
      this.tmap.panTo(new T.LngLat(Lnglat.lng, Lnglat.lat));
    },

    // 开始
    startAnimation() {
      if (this.CarTrack != undefined) {
        if (this.trackStatus == "START") {
          this.$message.warning("正在行程中");
          return false;
        }
        this.CarTrack.start();
        this.$message.success("开始行程");
        this.trackStatus = "START";
      } else {
        this.$message.warning("当前暂无轨迹");
      }
    },
    // 暂停
    pauseAnimation() {
      if (this.CarTrack != undefined) {
        if (this.trackStatus == "PAUSE_MOVE") {
          this.$message.warning("已暂停行程");
          return false;
        }
        this.CarTrack.pause();
        this.$message.success("暂停行程");
        this.trackStatus = "PAUSE_MOVE";
      }
    },
    // 停止
    stopAnimation() {
      if (this.CarTrack != undefined) {
        this.CarTrack.stop();
        this.$message.success("停止行程");
        this.trackStatus = "STOP_MOVE";
      } else {
        this.$message.warning("当前暂无轨迹");
      }
    },
    speedChange() {
      this.CarTrack.stop();
      if (this.speed != 0) {
        this.CarTrack.options.speed = Number(this.speed);
        this.CarTrack.start();
        this.CarTrack.stop();
        this.CarTrack.start();
        this.trackStatus = "START";
      }
    },
    clearTrack() {
      if (this.CarTrack) {
        this.CarTrack.clear(); // Clear all drawn elements and unregister related map events
      }
    },

    // 绘制轨迹线
    addline(val) {
      let that = this;
      // 移动到中心点
      that.map.centerAndZoom(new T.LngLat(val[0].lng, val[0].lat), 18);

      //创建标注对象
      let startPoint = new T.LngLat(val[0].lng, val[0].lat);
      let endPoint = new T.LngLat(
        val[val.length - 1].lng,
        val[val.length - 1].lat
      );
      // 起点
      const startMarker = new T.Marker(startPoint, {
        icon: new T.Icon({
          iconUrl: "https://gis.soszyzg.com/tdtimages/bus/start.png",
          iconAnchor: new T.Point(12, 31),
        }),
      });
      // 终点
      const endMarker = new T.Marker(endPoint, {
        icon: new T.Icon({
          iconUrl: "http://lbs.tianditu.gov.cn/images/bus/end.png",
          iconAnchor: new T.Point(12, 31),
        }),
      });
      //向地图上添加标注
      that.map.addOverLay(startMarker);
      that.map.addOverLay(endMarker);

      let points = [];
      val.forEach((item) => {
        points.push(new T.LngLat(item.lng, item.lat, item.curAddress));
      });
      // console.log(1231, points);
      setTimeout(() => {
        //创建线对象
        var line = new T.Polyline(points);
        //向地图上添加线
        that.map.addOverLay(line);
      }, 1000);
    },
  },
};
</script>
